<template>
    <div :class="className" class="user" @mouseenter="userActionShow=true" @mouseleave="userActionShow=false">
        <div class="user-img" :class="`${className}-img`">
            <img src="../../../../assets/images/default-portrait.jpg" />
        </div>
        <div class="user-info" :class="`${className}-info`">
            <div>{{user.account.nickname}}</div>
            <div>
                <user-type :type="user.account.account_type"></user-type>
            </div>
        </div>
        <transition name="action-animation">
            <div class="user-action" :class="`${className}-action`" v-show="userActionShow">
                <div @click="updateUserInfo">更新信息</div>
                <div @click="routerTo('/user-info')">个人中心</div>
                <div @click="routerTo('/theme')">系统主题</div>
                <div @click="outSystem">退出系统</div>
            </div>
        </transition>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import message from "@/lib/message";
import { loginHttp } from "@/lib/http/http";
import storage from "@/lib/storage/storage";
import UserType from "@/components/user/UserType.vue";
export default defineComponent({
    name: "MenuList",
    props: {
        className: {
            type: String,
            default: "",
        },
    },
    emits:["change"],
    components: { UserType },
    setup(props, ctx) {
        const store = useStore();
        const router = useRouter();
        const { UIAuth, bodySize, UserInfo } = toRefs(store.state);
        const userActionShow = ref(false);
        // 更新用户信息
        const updateUserInfo = () => store.dispatch("getLoginUserInfo");
        const routerTo = (path: string) => {
            router.push({ path });
            ctx.emit("change", path);
        };
        // 退出登录
        const outSystem = (): void => {
            message
                .confirm("确定要退出系统吗？")
                .then(() => {
                    message.loadingShow("正在安全退出系统");
                    loginHttp
                        .Delete("/login")
                        .then((data) => {
                            storage.clear();
                            router.push({ path: window.CONFIG.loginPage });
                        })
                        .catch((err) => "");
                })
                .catch(() => "");
        };
        return {
            UIAuth,
            bodySize,
            updateUserInfo,
            routerTo,
            user: UserInfo,
            userActionShow,
            outSystem
        };
    },
});
</script>
<style scoped lang="scss">
.user {
    position: relative;
    padding: 0 10px;
    text-align: left;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    &:hover {
        cursor: pointer;
    }
    &-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        & > img {
            width: 100%;
            height: 100%;
        }
    }
    &-info {
        margin-left: 6px;
        & > div {
            &:last-child {
                & > span {
                    font-size: 12px;
                    padding: 0 3px 1px 3px;
                    border-radius: 3px;
                }
            }
        }
    }
    &-action {
        position: absolute;
        width: 100%;
        top: 100%;
        right: 0;
        z-index: 2100;
        overflow: hidden;
        & > div {
            width: 100%;
            padding: 6px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }
    }
}

.action-animation-enter-active {
    animation: userActive-in 0.3s;
}
.action-animation-leave-active {
    animation: userActive-in 0.3s reverse;
}

@keyframes userActive-in {
    0% {
        //opacity: 0;
        //top: -100%;
        transform: scaleY(0);
        transform-origin: 50% 0 0;
    }
    100% {
        // opacity: 1;
        //top: 100%;
        transform-origin: 50% 0 0;
        transform: scaleY(1);
    }
}
.user-classic {
    &:hover {
        background-color: $primary-color;
        & .user-info {
            & > div {
                &:first-child {
                    color: #ffffff;
                }
            }
        }
    }
    &-img {
        border: 1px $border-color1 solid;
    }
    &-info {
        & > div {
            &:last-child {
                padding-top: 3px;
            }
        }
    }
    &-action {
        background-color: #ffffff;
        box-shadow: 0 0 5px $box-gray0-color;
        & > div {
            &:hover {
                background-color: $primary-color;
                color: #ffffff;
            }
        }
    }
}
.user-win {
    &:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    &-img {
        border: 1px $border-color1 solid;
    }
    &-info {
        & > div {
            &:first-child {
                color: rgba(255, 255, 255, 0.8);
            }
            &:last-child {
                padding-top: 3px;
            }
        }
    }
    &-action {
        color: rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.1);
        //box-shadow: 0 0 5px $box-gray0-color;
        & > div {
            &:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
        }
    }
}
</style>
